<template>
  <div class="batch-operate-dropdown-wrap">
    <el-dropdown :disabled="disabled" trigger="click">
      <el-button :disabled="disabled" class="el-dropdown-link">
        批量管理<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            @click="() => handleClick(item.value)"
            :key="index"
            v-for="(item, index) in comOptions"
          >
            <el-upload
              v-if="isUpload"
              :headers="{
                userCode,
                orgCode
              }"
              name="uploadFile"
              :show-file-list="false"
              :action="item.uploadUrl"
              :file-list="fileList"
              :on-success="success"
            >
              <span>{{ item.label }}</span>
            </el-upload>
            <span
              v-if="!isUpload && item.downloadUrl"
              @click="doDownload(item.downloadUrl)"
              >{{ item.label }}</span
            >
            <span v-if="!isUpload && !item.downloadUrl">{{ item.label }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <ImportTipVue
      :dialog-visible="showImportResult"
      @dlgClose="
        () => {
          showImportResult = false;
          this.$emit('BatchOperate');
        }
      "
      :import-tip="importTip"
    />
  </div>
</template>

<script lang="ts">
import { ArrowDown } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus/lib/index';
import { defineComponent, PropType } from 'vue';
import ImportTipVue from '@/components/downloadUploadBtns/importTip.vue';
import { downLoadFile } from '@/utils/http';

export default defineComponent({
  props: {
    opKeys: {
      type: Array as PropType<string[]>,
      default: () => []
    },
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    //是否包含上传
    isUpload: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    enumName: {
      type: String as PropType<string>,
      default: '批量操作'
    }
  },
  emits: ['BatchOperate', 'success'],
  components: { ArrowDown, ImportTipVue },
  data() {
    return {
      showImportResult: false,
      importTip: null as any,
      fileList: [],
      userCode:
        process.env.VUE_APP_LOCAL_COOKIE === 'development' ? 'superadmin' : '',
      orgCode:
        process.env.VUE_APP_LOCAL_COOKIE === 'development' ? '10000' : '',
      options: [
        {
          value: 'publish',
          label: '发布'
        },
        {
          value: 'collection',
          label: '收藏'
        },
        {
          value: 'cancel-collection',
          label: '取消收藏'
        },
        {
          value: 'delete',
          label: '删除'
        },
        {
          value: 'offline',
          label: '下线'
        },
        {
          value: 'export',
          label: '导出'
        },
        {
          value: 'atom-download',
          label: '原子指标模板下载',
          downloadUrl: '/tmplate/download/1'
        },
        {
          value: 'derive-download',
          label: '派生指标模板下载',
          downloadUrl: '/tmplate/download/6'
        },
        {
          value: 'atom-export',
          label: '原子指标导入',
          uploadUrl: process.env.VUE_APP_SERVERPATH + '/tmplate/import/1'
        },
        {
          value: 'derive-export',
          label: '派生指标导入',
          uploadUrl: process.env.VUE_APP_SERVERPATH + '/tmplate/import/6'
        }
      ],
      value: ''
    };
  },
  computed: {
    comOptions() {
      return this.options.filter((op: any) => {
        return this.opKeys.indexOf(op.value) > -1;
      });
    }
  },
  methods: {
    handleClick(v: string) {
      this.$emit('BatchOperate', v);
    },
    //文件下载
    async doDownload(downloadUrl: string) {
      try {
        downLoadFile({
          url: downloadUrl,
          method: 'get'
        });
      } catch (e) {}
    },
    //上传成功
    success(res: any) {
      const { code, data, msg } = res;
      if (code === 200) {
        const { batchNo, duplicate, fail, success, total } = data;
        this.importTip = {
          batchNo,
          duplicate,
          fail,
          success,
          total
        };
        this.showImportResult = true;
        this.$emit('success');
      } else {
        ElMessage.error(msg);
      }
    }
  }
});
</script>

<style lang="scss">
</style>
